<!-- 充值 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付</title>
		<link rel="stylesheet" href="../../layui/css/layui.css">
		<!-- 样式 -->
		<link rel="stylesheet" href="../../css/style.css" />
		<!-- 主题（主要颜色设置） -->
		<link rel="stylesheet" href="../../css/theme.css" />
		<!-- 通用的css -->
		<link rel="stylesheet" href="../../css/common.css" />
		<style>
			html::after {
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				content: '';
				display: block;
				background-attachment: fixed;
				background-size: cover;
				background-position: center;
				z-index: -1;
			}
			#swiper {
				overflow: hidden;
			}
			#swiper .layui-carousel-ind li {
				width: 20px;
				height: 10px;
				border-width: 0;
				border-style: solid;
				border-color: rgba(0,0,0,.3);
				border-radius: 6px;
				background-color: #f7f7f7;
				box-shadow: 0 0 6px rgba(255,0,0,.8);
			}
			#swiper .layui-carousel-ind li.layui-this {
				width: 30px;
				height: 10px;
				border-width: 0;
				border-style: solid;
				border-color: rgba(0,0,0,.3);
				border-radius: 6px;
			}

			.index-title {
				text-align: center;
				box-sizing: border-box;
				width: 980px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			.index-title span {
				padding: 0 10px;
				line-height: 1.4;
			}
			.center-container .layui-nav-tree {
				width: 100%;
			}
			.center-container .layui-nav {
				position: inherit;
			}
			.center-container .layui-nav-tree .layui-nav-item {
				height: 44px;
				line-height: 44px;
				font-size: 16px;
				color: rgba(17, 17, 17, 1);
				border-width: 0px 0px 1px 0px;
				border-style: solid;
				border-radius: 0;
				background-color: #fff;
				text-align: center;
			}
			.center-container .layui-nav-tree .layui-nav-bar {
				height: 44px !important;
				opacity: 0 !important;
			}
			.center-container .layui-nav-tree .layui-nav-item.layui-this {
				font-size: 16px;
				color: rgba(17, 17, 17, 1);
				border-width: 0;
				border-style: solid;
				border-radius: 0;
			}
			.center-container .layui-nav-tree .layui-nav-item:hover {
				font-size: 14px;
				color: #fff;
				border-width: 0;
				border-style: solid;
				border-radius: 0;
			}
			.center-container .layui-nav-tree .layui-nav-item a {
				line-height: inherit;
				height: auto;
				background-color: inherit;
				color: inherit;
				text-decoration: none;
			}
			.right-container {
				position: relative;
			}

			.right-container .layui-form-item {
				display: flex;
				align-items: center;
			}
			.right-container .layui-input-block {
				margin: 0;
				flex: 1;
			}
			.right-container .input .layui-input {
				padding: 0 12px;
				height: 40px;
				font-size: 15px;
				border-radius: 4px;
				border-width: 1px;
				border-style: solid;
				background-color: #fff;
				text-align: left;
			}
			.right-container .select .layui-input {
				padding: 0 12px;
				height: 40px;
				font-size: 15px;
				border-radius: 4px;
				border-width: 1px;
				border-style: solid;
				background-color: #fff;
				text-align: left;
			}
			.right-container .date .layui-input {
				padding: 0 12px;
				height: 40px;
				font-size: 15px;
				color: rgba(160, 67, 26, 1);
				border-radius: 4px;
				border-width: 1px;
				border-style: solid;
				background-color: #fff;
				box-shadow: 0 0 0px rgba(255,0,0,.8);
				text-align: left;
			}


			.header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;}
			#plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;background-color: var(--publicMainColor);padding-top: 40px !important;}
			.header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;}
			#category {padding-top: 136px;margin-left: 0px;padding-bottom: 30px;width: 205px;float: left;padding-left: 15px;text-align: left;margin-top: -120px;background-color: var(--publicMainColor);border-radius: 0px 0px 3px 3px;}
			.header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;width: 156px;text-align: left;}
			#category a.active::before {display: none;}
			#category a.active::after {display:none;}
			#category a.active, #category a:hover {background: var(--publicSubColor);color: #FFFFFF;border-color: #838383;transition: 0.3s; transform-origin: bottom;}
			#category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;margin-right:16px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
			#category li:last-child { border-bottom:none;}
			#category a { border:0px; background:none; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;}
			#category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;position: absolute;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
			#category a.active::before {display: none;}
			#category li:hover {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
			#category .bbbb, #category li .aaaa {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF;  transition: 0.3s; transform-origin: bottom;}
			#category li:hover ul li{width: 136px;}
			#category li:hover ul li a{color: rgba(255, 255, 255, 0.45);width: 136px;overflow: hidden;    background-color: rgb(34, 73, 160);    padding-left:0px;}
			#category li ul li:hover a{  padding-left:0px; margin-left: 0px;}
			#category li:hover a{color:#fff}
		</style>
		<style type="text/css">

			.pay-type-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}

			.pay-type-item {
				background: #FFFFFF;
				border: 3px dotted #EEEEEE;
				margin: 20px;
				padding: 20px;
				width: 200px;
			}
		</style>
	</head>
	<body style="background: #EEEEEE;">

		<div id="app">

				<!-- 轮播图 -->
				<div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
					<div carousel-item>
						<div v-for="(item,index) in swiperList" :key="index">
							<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
						</div>
					</div>
				</div>

			<form class="layui-form" lay-filter="myForm">
				<div class="layui-form-item" style="margin: 20px;background: #FFFFFF;border:3px dotted #EEEEEE;padding: 20px;">
					<label class="layui-form-label">支付金额</label>
					<div class="layui-input-block">
						<input type="number" name="newMoney" id="newMoney" lay-verify="required|double" placeholder="充值金额" autocomplete="off"
						 class="layui-input">
					</div>
				</div>
				<div class="pay-type-list">
					<div class="pay-type-item">
						<input type="radio" name="type" value="微信支付" checked>
						<img  src="../../img/weixin.png" alt>
						<span>微信支付</span>
					</div>
					<div class="pay-type-item">
						<input type="radio" name="type" value="支付宝支付">
						<img src="../../img/zhifubao.png" alt>
						<span>支付宝支付</span>
					</div>
					<div class="pay-type-item">
						<input type="radio" name="type" value="建设银行">
						<img style="width: 120px;height: 60px;" src="../../img/jianshe.png" alt>
					</div>
					<div class="pay-type-item">
						<input type="radio" name="type" value="农业银行">
						<img style="width: 120px;height: 60px;" src="../../img/nongye.png" alt>
					</div>
					<div class="pay-type-item">
						<input type="radio" name="type" value="中国银行">
						<img style="width: 120px;height: 60px;" src="../../img/zhongguo.png" alt>
					</div>
					<div class="pay-type-item">
						<input type="radio" name="type" value="交通银行">
						<img style="width: 120px;height: 60px;" src="../../img/jiaotong.png" alt>
					</div>
				</div>
				<button style="margin-left: 20px;width:860px;height: 40px;line-height: 40px;" class="layui-btn btn-submit btn-theme"
				 lay-submit lay-filter="*">确认支付</button>
			</form>

		</div>

		<!-- layui -->
		<script src="../../layui/layui.js"></script>
		<!-- vue -->
		<script src="../../js/vue.js"></script>
		<!-- 组件配置信息 -->
		<script src="../../js/config.js"></script>
		<!-- 扩展插件配置信息 -->
		<script src="../../modules/config.js"></script>
		<!-- 工具方法 -->
		<script src="../../js/utils.js"></script>
		<!-- 校验格式工具类 -->
		<script src="../../js/validate.js"></script>

		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					user: {}
				},
				filters: {
					newsDesc: function(val) {
						if (val) {
							if (val.length > 200) {
								return val.substring(0, 200).replace(/<[^>]*>/g).replace(/undefined/g, '');
							} else {
								return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
							}
						}
						return '';
					}
				},
				methods: {
					jump(url) {
						jump(url)
					}
				}
			})

			layui.use(['layer', 'element', 'http', 'jquery', 'form'], function() {
				var layer = layui.layer;
				var element = layui.element;
				var http = layui.http;
				var jquery = layui.jquery;
				var form = layui.form;

				// 查询保险员信息
				let table = localStorage.getItem("userTable");
				http.request(`${table}/session`, 'get', {}, function(data) {
					vue.user = data.data;
				});
				
				// 提交表单
				form.on('submit(*)', function(data) {
					// 添加金额
					data = data.field;
					if(Number(data.newMoney)<=0 && String(data.newMoney).indexOf('.') != -1 &&(String(data.newMoney).length - (String(data.newMoney).indexOf('.') + 1))>2) {
						debugger
					    layer.msg('请输入正确金额，只能充值两位小数的正数金额', {
								time: 2000,
								icon:5
						});
						return false;
					}
					vue.user.newMoney = Number(vue.user.newMoney) + Number(data.newMoney);
					http.requestJson(`${table}/update`, 'post', vue.user, function(data) {
						layer.msg('支付成功', {
							time: 2000,
							icon: 6
						}, function() {
							window.parent.location.reload();
						});
					});
					return false
				});

			});
		</script>
	</body>
</html>
